<template>
  <div
    class="my-collapse-item"
    :class="{'is-disabled': disabled}"
  >
    <div
      class="my-collapse-item__header"
      :class="{'is-disabled': disabled, 'is-active': isActive}"
      :id="`item-header-${name}`"
      @click="itemClickHandle"
    >
      <slot name="title">{{ title }}</slot>
      <My-Icon icon="angle-right" class="header-angle" />
    </div>

    <transition name="slide" v-on="transitionEvents">
      <div class="my-collapse-item__wrapper" v-show="isActive">
        <div class="my-collapse-item__content" :id="`item-content-${name}`">
          <slot />
        </div>
      </div>
    </transition>

  </div>
</template>

<script setup name="MyCollapseItem">
import { inject, computed } from 'vue'
import { collapseItemProps, collapseContextKey } from './props'
defineOptions({
  name: 'MyCollapseItem'
})
const props = defineProps(collapseItemProps)
const { activeNames, handleItemClick } = inject(collapseContextKey)
const isActive = computed(() => {
  const index = activeNames.value.indexOf(props.name)
  return index !== -1
})
const itemClickHandle = () => {
  if (props.disabled) return
  handleItemClick(props.name)
}
const transitionEvents = {
  beforeEnter(el) {
    el.style.height = '0px'
    el.style.overflow = 'hidden'
  },
  enter(el) {
    el.style.height = el.scrollHeight + 'px'
  },
  afterEnter(el) {
    el.style.height = ''
    el.style.overflow = ''
  },
  beforeLeave(el) {
    el.style.height = el.scrollHeight + 'px'
    el.style.overflow = 'hidden'
  },
  leave(el) {
    el.style.height = '0px'
  },
  afterLeave(el) {
    el.style.height = ''
    el.style.overflow = ''
  }
}
</script>

<style lang="scss" scoped>

</style>
